<template>
	<view class="container">
		<!-- 顶部选项卡 -->
		<view class="swiper-tab dis-flex flex-x-around flex-y-center">
			<block v-for="(item, index) in tabList" :key="index">
				<view :class="'swiper-tab-item ' + (dataType == item.value ? 'on' : '')" :data-current="item.value" @tap="swichNav">{{ item.text }}</view>
			</block>
		</view>
		<!-- 退款/售后单 -->
		<scroll-view :scroll-y="true" @scrolltolower="onPageDown" :style="'height: ' + swiperHeight + 'px;'">
			<view class="widget-list" v-if="list.data.length">
				<view class="widget-detail" @tap.stop.prevent="triggerDetail" :data-id="item.order_refund_id" v-for="(item, index) in list.data" :key="index">
					<view class="row-block dis-flex flex-y-center">
						<view class="flex-box">{{ item.create_time }}</view>
						<view class="flex-box t-r">
							<text class="col-m">{{ item.state_text }}</text>
						</view>
					</view>

					<view class="detail-goods row-block dis-flex">
						<view class="goods-image"><image :src="item.order_goods.image.file_path" mode="aspectFit"></image></view>
						<view class="goods-right flex-box">
							<view class="goods-name">
								<text class="twolist-hidden">{{ item.order_goods.goods_name }}</text>
							</view>
							<view class="goods-attr">
								<text class="f-26 col-8">{{ item.order_goods.goods_attr }}</text>
							</view>
							<view class="goods-num t-r">
								<text class="f-26 col-8">×{{ item.order_goods.total_num }}</text>
							</view>
						</view>
					</view>

					<view class="detail-order row-block">
						<view class="item dis-flex flex-x-end flex-y-center">
							<text class="">{{ $t('page_refund_index.Amount_goods') }}</text>
							<text class="col-m">{{ price_mode.unit }}{{ item.order_goods.total_pay_price }}</text>
						</view>
						<view class="item dis-flex flex-x-end flex-y-center">
							<text class="">{{ $t('page_refund_index.Actual_payment_order') }}</text>
							<text class="col-m">{{ price_mode.unit }}{{ item.order_master.pay_price }}</text>
						</view>
					</view>

					<view class="detail-operate row-block dis-flex flex-x-end flex-y-center">
						<view class="detail-btn btn-detail" @tap.stop.prevent="onTargetDetail" :data-id="item.order_refund_id">{{ $t('page_refund_index.View_details') }}</view>
					</view>
				</view>
				<!-- 没有更多 -->
				<view v-if="list.data.length && !isLoading && isLastPage" class="no-more f-30">{{ $t('page_refund_index.No_more') }}</view>
			</view>
			<!-- 没有记录 -->
			<view class="yoshop-notcont" v-if="!list.data.length && !isLoading">
				<text class="iconfont icon-wushuju"></text>
				<text class="cont">{{ $t('page_refund_index.No_record') }}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
const app = getApp();
export default {
	data() {
		return {
			applyStatus: [],
			dataType: -1,
			submsgSetting: {},
			price_mode: uni.getStorageSync('price_mode'),
			// 订阅消息配置
			list: [],

			// 列表数据
			page: 1,

			// 当前页码
			isLoading: true,

			// 是否正在加载中
			// 当前是最后一页
			isLastPage: false,

			swiperHeight: '',
			tabList: [],
			length: ''
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */ onLoad(options) {
		let _this = this; // 设置swiper的高度

		_this.setSwiperHeight(); // 获取订阅消息配置

		_this.getSubmsgSetting();
	},
	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow() {
		let _this = this; // 获取退款/售后单列表

		_this.getRefundList();
	},
	methods: {
		/**
		 * 获取退款/售后单列表
		 */
		getRefundList(isNextPage, page) {
			let _this = this;

			app.globalData._get(
				'user.refund/lists',
				{
					state: _this.dataType,
					page: page || 1
				},
				result => {
					// 创建页面数据
					_this.setData(_this.createData(result.data, isNextPage));
				}
			);
		},

		/**
		 * 获取订阅消息配置
		 */
		getSubmsgSetting() {
			let _this = this;

			app.globalData._get('wxapp.submsg/setting', {}, result => {
				_this.submsgSetting= result.data.setting
			});
		},

		/**
		 * 创建页面数据
		 */
		createData(data, isNextPage) {
			data['isLoading'] = false; // 列表数据

			let dataList = this.list;

			if (isNextPage == true && typeof dataList !== 'undefined') {
				data.list.data = dataList.data.concat(data.list.data);
			} // 导航栏数据

			data['tabList'] = [
				{
					value: -1,
					text: '全部'
				},
				{
					value: 0,
					text: '待处理'
				}
			];
			return data;
		},

		/**
		 * 设置swiper的高度
		 */
		setSwiperHeight() {
			let systemInfo = uni.getSystemInfoSync();
			let rpx = systemInfo.windowWidth / 750;
			let // 计算rpx
				tapHeight = Math.floor(rpx * 82);
			let // tap高度
				swiperHeight = systemInfo.windowHeight - tapHeight; // swiper高度
			// 获取系统信息(拿到屏幕宽度)
			this.swiperHeight = swiperHeight
		},

		/**
		 * 点击tab切换
		 */
		swichNav(e) {
			let _this = this;

			let current = e.target.dataset.current;
			if (_this.dataType == current) {
				return false;
			}

			_this.dataType= current
			_this.list= {}
			_this.page= 1
			_this.isLastPage= false
			_this.isLoading= true
			_this.getRefundList();
		},

		/**
		 * 下拉到底加载数据
		 */
		onPageDown() {
			let _this = this; // 已经是最后一页

			if (_this.page >= _this.list.last_page) {
				_this.isLastPage= true

				return false;
			} // 获取退款/售后单列表

			_this.getRefundList(true, ++_this.page);
		},

		/**
		 * 跳转售后详情页
		 */
		onTargetDetail(e) {
			let _this = this; // 跳转售后详情页

			const onCallback = () => {
				uni.navigateTo({
					url: `./detail/detail?order_refund_id=${e.currentTarget.dataset.id}`
				});
			}; // 请求用户订阅消息

			_this._onRequestSubscribeMessage(onCallback);
		},

		/**
		 * 订阅消息 => [售后状态通知]
		 */
		_onRequestSubscribeMessage(callback) {
			let _this = this;

			let tmplItem = _this.submsgSetting.order.refund.template_id;

			if (tmplItem.length > 0) {
				uni.requestSubscribeMessage({
					tmplIds: [tmplItem],

					success(res) {},

					fail(res) {},

					complete(res) {
						if (callback) {
							callback();
						}
					}
				});
			}
		},

		triggerDetail() {
			console.log('占位：函数 triggerDetail 未声明');
		}
	}
};
</script>
<style>
@import './index.css';
</style>
